<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- 排班管理tab -->
      <el-tab-pane label="排班管理" name="first">
        <vue-event-calendar
          :events="PaiBanData"
          @day-changed="handleDayChanged"
          @month-changed="handleMonthChanged"
        ></vue-event-calendar>

        <!-- 修改框 -->
        <el-dialog :title="xiugaikuangtitle" :visible.sync="dialogFormVisible" width="300px">

          <el-select v-model="banci" placeholder="请选择员工班次">
            <el-option label="早班" value="0"></el-option>
            <el-option label="晚班" value="1"></el-option>
          </el-select>
          <el-input placeholder="请输入此班次员工" v-model="yuangong" autocomplete="off"></el-input>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="changedPaiBan">确 定</el-button>
          </div>
        </el-dialog>


      </el-tab-pane>
      <!-- 新增餐桌tab -->
    </el-tabs>
  </div>
</template>

<script>
import axios from "../../http/http";
import api from "../../http/api";
export default {
  name: "lll_pbkq",

  // 页面数据
  data() {
    return {
      // 默认的tab
      activeName: "first",
      currentPage: 1,
      PaiBanData: [],
      today: "",
      month: "",
      banci: "",
      yuangong: "",
      EventDate: "",
      xiugaikuangtitle: "",
      dialogVisible: false, //删除
      // 修改
      dialogTableVisible: false,
      dialogFormVisible: false
    };
  },
  methods: {
    handleMonthChanged(month) {
      console.log(month);
    },
    // 跳转当前日期
    handleDayChanged(day) {
      console.log(day);
      this.dialogFormVisible = true;
      if (day.events.length > 0) {
        this.xiugaikuangtitle = "修改排班信息";
        console.log(this.xiugaikuangtitle);
      } else if (day.events.length == 0) {
        this.xiugaikuangtitle = "新增排班信息";
      }
      return (this.EventDate = day.date);
    },
    // 改变排班安排
    changedPaiBan() {
      // this.handleDayChanged()
      // console.log(this.handleDayChanged())
      this.dialogFormVisible = false;
      console.log(this.banci);
      console.log(this.yuangong);
      console.log(this.EventDate);
    },
    // tab跳转
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    changePage(val) {
      // 当前页数
      console.log(val);
      this.currentPage = val;
    },
    // 获取后端数据方法
    getPaiBanData() {
      return axios({
        url: "http://123.57.67.148:3000/mock/40/lllZhiBan",
        method: "get"
      }).then(res => {
        // console.log("获取到了数据");
        console.log(res.data.data);
        this.PaiBanData = res.data.data;
        this.today = res.data.today;
        this.month = res.data.nowmonth;
        // console.log(this.today);
        // console.log(this.PaiBanData);
        // console.log(this.month);
      });
    },
  },
  computed: {
    // 当前页数据
    currentData() {
      let kaishi = (this.currentPage - 1) * 3;
      let jieshu = (this.currentPage - 1) * 3 + 3;
      return this.HuiYuanData.slice(kaishi, jieshu);
    },
    // 总数据
    pageNum() {
      return this.HuiYuanData.length;
    }
  },
  created() {
    // 获取数据
    this.getPaiBanData().then(res => {
      // console.log('123')
      // console.log(res)
      // console.log(this.today)
      // 跳转到今天
      // this.$EventCalendar.toDate(this.today);
    });

    // // 跳转到当前日
    // this.$EventCalendar.toDate(today);
    // 测试后端的
    // axios({
    //   url: "rms/operate/member/queryMember",
    //   method: "post",
    // }).then(res => {
    //   console.log("获取到了后台数据");
    //   console.log(res);
    //   // this.HuiYuanData = res.data.data;
    //   // // let studentData = res.data.data;
    //   // console.log(this.HuiYuanData);
    // });
  }
};
</script>

<style scoped lang="less">
.el-table {
  height: 600px;
}

#lll_search {
  width: 100%;
  height: 44px;
  padding-top: 25px;
  padding-bottom: 35px;
  .el-input {
    float: right;
    width: 300px;
  }
  .el-button {
    float: right;
    height: 40px;
    margin-right: 40px;
    margin-left: 40px;
  }
}
</style>
